<template>
	<view class="page_box">
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<text class="text-bold">科目三{{type==1?'适应':'加练'}}</text>
			</block>
			<block slot="right">
				<text v-if="!showSearchBox" class="lg cuIcon-unfold margin-left-xs btn-show" @click="openSearchBox()"></text>
				<text v-if="showSearchBox" class="lg cuIcon-fold margin-left-xs btn-show" @click="closeSearchBox()"></text>
			</block>			
			<block slot="right">
				<view class="action">
					<image src="../../../static/img/line-exchange.png" class="top_right_ico" @tap="turnR()"></image>
				</view>
			</block>
		</cu-custom>
		<view class="head_box">
			<scroll-view scroll-x class="bg-white nav solid-bottom solid-top">
				<view class="flex text-center">
					<view class="cu-item flex-sub" @tap="goPath('/pages/user/count/sectionIII-entered?type='+type)">已入场</view>
					<view class="cu-item flex-sub text-blue cur">在练车</view>
				</view>
			</scroll-view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" class="scroll-box">
				<view class="list" v-for="(item, index) in list" :key="item.clid">
					<view class="order-head x-bc">
						<text class="cu-btn bg-blue round">{{item.clid}}号车</text>
						<text v-if="item.sj">已用：{{item.sj}}</text>
						<view class="cu-btn light bg-blue round" @tap.stop="onBatch(item)">批量操作</view>
						<text v-if="showDetailId==item.clid"  @tap="hideDetail()" class="lg cuIcon-fold"></text>
						<text v-else class="lg cuIcon-unfold" @tap="onDetail(item.clid)"></text>						
					</view>
					<view v-if="subList.length&&showDetailId==item.clid" class="solid-top">
						<view style="height: 10rpx; display: block;"></view>
						<view class="margin-top-sm" v-for="(subitem, index) in subList" :key="index">
							<view class="order-item x-bc">
								<text>{{ subitem.xyname}}</text>
								<text>{{ subitem.ttmc}}</text>
								<text></text>
							</view>
							<view class="order-item" v-if="type==1">
								<text>适应场地圈数：{{ subitem.ylsycd }}/{{ subitem.zsyqs}}</text>								
							</view>
							<view v-else>
								<view class="order-item">
									<text>加强圈数/加强总圈数：{{subitem.ylqs}}/{{subitem.zqs}}</text>
								</view>
								<view class="order-item">
									<text>加强时间/总时间：{{ subitem.ylxs}}/{{subitem.zsj}}</text>
								</view>
							</view>
																					
							<view class="order-item x-bc">
								<text>安全员：{{subitem.name}}</text>
								<text >线路：{{subitem.xl}}</text>
								<text></text>
							</view>
							<view class="order-bottom x-bc list-border">
							<view class="all-msg"></view>
							<view class="btn-box">
								<button @tap.stop="onChange(subitem)" class="cu-btn obtn1 bg-yellow">更换车辆</button>
								<button @tap.stop="onEnd(subitem)" class="cu-btn obtn2 bg-red">结束练车</button>
								<button @tap.stop="onAdd(subitem)" class="cu-btn obtn2 bg-blue">+</button>
							</view>
							</view>
						</view>
					</view>
					
				</view>
				<uni-load-more v-if="loading" status="loading"></uni-load-more>
				<uni-load-more v-if="ended&&list.length" status="noMore"></uni-load-more>
				<xw-empty :is-show="ended&&!list.length"></xw-empty>
			</scroll-view>
		</view>
		<!-- 弹出批量操作选择 -->
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择操作</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<radio-group class="block" @change="RadioChange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in optionArry" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{item.title}}</view>
									<radio class="round blue" :class="radio==item.id?'checked':''" :checked="radio==item.id?true:false"
									 :value="item.id+''"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
				<view class="cu-bar bg-gray">
					<view class="cu-btn bg-white round margin-left-lg" @tap="hideModal">取消</view>
					<view class="cu-btn bg-blue round margin-right" @tap="doBatch">确定</view>
				</view>
			</view>
		</view>
		<!-- 更改车辆 -->
		<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white padding-sm" style="padding-bottom: 0rpx; margin-bottom: 0rpx;" v-if="selName">
					<view class="text-lg">学员：{{selName}}</view>
				</view>
				<view class="cu-bar bg-white padding-sm">
					<view class="text-lg">请选择车号</view>
				</view>
				<scroll-view scroll-y="true" class="dialog-scroll-box bg-white">
					<view class="grid col-5 padding-sm">					
						<view v-for="(item,index) in checkboxCarList" class="padding-xs" :key="index">
							<button class="cu-btn block" style="padding: 0rpx 18rpx;" :class="selCarId==item.clxh?'bg-blue':'line-blue'"
								@tap="ChooseCar" :data-value="item.clxh"> {{item.cph+'号'}}
							</button>
						</view>
					</view>
				</scroll-view>
				<view class="cu-bar bg-white padding-sm">
					<view class="text-lg">请选择安全员</view>
				</view>
				<scroll-view scroll-y="true" class="dialog-scroll-box bg-white">
					<view class="grid col-5 padding-sm">					
						<view v-for="(item,index) in safetyList" class="padding-xs" :key="index">
							<button class="cu-btn block" style="padding: 0rpx 18rpx; font-size:26rpx;" :class="selSafeId==item.uuid?'bg-blue':'line-blue'"
								@tap="ChooseSafety" :data-value="item.uuid"> {{item.name}}
							</button>
						</view>
					</view>
				</scroll-view>
				
				<view class="cu-bar bg-gray padding-lr">
					<view class="cu-btn round bg-white" @tap="hideModal">取消</view>
					<view class="cu-btn round bg-blue" @tap="onPlanOk">确定安排练车</view>
				</view>
			</view>
		</view>
		<!--筛选-->
		<uni-popup ref="popup" type="top">
			<view class="search-box solid-top">
				<view class="search-box-title">学员类型</view>
				<view class="search-box-list">
					<text class="cu-btn round margin-right-sm" @tap="onTagUType(0)" :class="utype==0?'bg-blue':''">全部</text>
					<text class="cu-btn round margin-right-sm" @tap="onTagUType(1)" :class="utype==1?'bg-blue':''">团体</text>
					<text class="cu-btn round margin-right-sm" @tap="onTagUType(2)" :class="utype==2?'bg-blue':''">个人</text>
				</view>
				<view class="search-box-title">车号</view>
				<view class="search-box-list">
					<text class="cu-btn round margin-right-sm car-check" style="padding: 0 10px;font-size: 28rpx;" @tap="onTagCar(0)" :class="selCarId==0?'bg-blue':''">全部</text>
					<text class="cu-btn round margin-right-sm car-check" style="padding: 0 10px;font-size: 28rpx;" @tap="onTagCar(item.clxh)" :class="selCarId==item.clxh?'bg-blue':''" v-for="(item,index) in checkboxCarList" :key="index">{{item.cph}}{{item.cph.indexOf("C") != -1?'':'号'}}</text>
				</view>
			</view>
			<view>
				<view class="cu-btn bg-gray lg w50" @tap="closeSearchBox()">取消</view>
				<view class="cu-btn bg-blue lg w50">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import nuiPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {nuiPopup},
		data() {
			return {
				type: 0,
				utype: 0,
				list: [],
				subList:[],
				page: 1,
				size: 20,
				loading: false,
				ended: false,
				picker: ['个人', '团体', '全部'],
				checkboxCarList: [],
				safetyList:[],
				showSearchBox:false,
				modalName:'',
				radio:0,
				optionArry:[
					{
						id:0,
						title:'整车结束'
					},
					{
						id:1,
						title:'整车核销'
					}
				],
				selCarId:'',
				selSafeId:'',
				showDetailId:0,
				selName:'',
				planInfo:{},
				doCarId:0
			}
		},
		onLoad(option) {
			if(option.type)
			{
				this.type=option.type;
			}
			this.page = 1;
			this.ended = false;
			this.loadList();			
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.page = 1;
				this.ended = false;
				this.loadList();
			},1000)
		},
		onReachBottom() {
			if (!this.ended) this.loadList();
		},
		methods: {
			turnR(){
				if(this.type==0)
				{
					this.type=1;
				}
				else if(this.type==1)
				{
					this.type=0;
				}
				this.page = 1;
				this.ended = false;
				this.loadList();
			},
			loadList() {
				this.tool.request('c=api_xyqd&m=queryXylcList&kmtype=3&xytyle=5&jltype='+this.type+'&pageNo='+this.page+'&pageSize='+this.size,'','post',{login:true}).then(r => {
					if (r.code == '000') {
						const list = this.page == 1 ? [] : this.list;
						list.push(...r.data);
						this.list=list;
						this.page++;
						this.ended = r.data.length < this.size;
						uni.stopPullDownRefresh();
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			loadCar() {
				this.tool.request('c=api_Aqygl&m=getClxx&pageNo=1&pageSize=50&clkm=3','','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.checkboxCarList=r.data;
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			loadSafety() {
				this.tool.request('c=api_Aqygl&m=getAayXx&pageNo=1&pageSize=50','','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.safetyList=r.data;
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			openSearchBox(){
				if(!this.checkboxCarList.length)
				{
					this.loadCar();
				}				
				this.showSearchBox=true;
				this.$refs.popup.open();
				console.log(this.showSearchBox);
			},
			closeSearchBox(){
				this.showSearchBox=false;
				this.$refs.popup.close();
			},
			// 批量操作
			onBatch(item){
				this.modalName = "RadioModal"
				this.doCarId = item.clid;
			},
			//选择团队
			onTagUType(n){
				this.utype=n;
			},
			onTagCar(val){
				this.selCarId=val;
			},
			goPath(path)
			{
				uni.navigateTo({
					url: path
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			// 单选选择
			RadioChange(e) {
				this.radio = e.detail.value
			},
			// 确定批量操作
			doBatch(){
				// 操作按钮类型
				let type=this.radio;
				if(type==0)
				{
					this.modalName = null;
					this.tool.request('c=api_Aqygl&m=pljslc&clxh='+this.doCarId,'','post',{login:true}).then(r => {
						if (r.code == '000') {
							this.page = 1;
							this.ended = false;
							this.loadList();
							this.tool.showMsg('操作成功！');							
						} else this.tool.showMsg(r.msg);
					}).catch(() => {});
				}												
			},
			onDetail(clid)
			{
				this.subList=[];
				this.showDetailId=clid;
				this.tool.request('c=api_xyqd&m=querykmsXylcList&clid='+clid+'&jltype='+this.type+'&pageNo=1&pageSize=50','','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.subList=r.data;
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			hideDetail()
			{
				this.subList=[];
				this.showDetailId=0;
			},
			onEnd(item){
				this.tool.request('c=api_Aqygl&m=jslc&sfzh='+item.sfzh+'&uuid='+item.uuid+'&clxh='+item.clid,'','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.page = 1;
						this.ended = false;
						this.loadList();
						this.tool.showMsg('操作成功！');
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			onAdd(item){
				this.tool.request('c=api_xyqd&m=updateLccs&sfzh='+item.sfzh+'&uuid='+item.uuid+'&clxh='+item.clid+'&Kmtype=3','','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.tool.showMsg('操作成功！');
						this.onDetail(item.clid);
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			onChange(item)
			{
				if(item)
				{
					this.selName=item.xyname;
					this.planInfo={
						sfzh:item.sfzh,
						uuid:item.uuid,
						oldcl:item.clid
					}
				}
				this.modalName = "ChooseModal";
				this.loadCar();
				this.loadSafety();
			},
			//确认安排
			onPlanOk(){
				if (!this.selCarId) {
					this.tool.showMsg('请先选择车号！');
					return false;
				}
				if (!this.selSafeId) {
					this.tool.showMsg('请先选择安全员！');
					return false;
				}
				var pram='';
				var data='';
				//安排单人练车
				if(this.planInfo.uuid)
				{
					pram='c=api_Aqygl&m=apcl&sfzh='+this.planInfo.sfzh+'&uuid='+this.planInfo.uuid+'&clxh='+this.selCarId+'&aqyid='+this.selSafeId+'&oldcl='+this.planInfo.oldcl;					
				}
				this.tool.request(pram,data,'post',{login:true}).then(r => {
					if (r.code == '000') {
						this.modalName = null;
						this.selCarId='';
						this.selSafeId='';
						this.page = 1;
						this.ended = false;
						this.loadList();
						this.tool.showMsg('操作成功！');
						//this.onDetail(this.planInfo.oldcl);
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			ChooseCar(e)
			{
				this.selCarId=e.currentTarget.dataset.value;
			},
			ChooseSafety(e)
			{
				this.selSafeId=e.currentTarget.dataset.value;
			},
		}
	}
</script>

<style lang="less">
	.page_box {
		position: relative;
	}
	.w50 {
		width: 50%;
	}
	
	.content_box {
		padding: 0 20rpx;
	}
	.top_right_ico{
		width: 48rpx;
		height: 48rpx;
	}
	.list {
		background: #fff;
		margin: 20rpx 0;
		border-radius: 10rpx;
		padding-top: 25rpx;
	
		.order-bottom {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
	
			.btn-box {
				justify-content: flex-end;
			}
			.obtn1 {
				width: 160rpx;
				height: 60rpx;
				background: #fff;
				border-radius: 30rpx;
				border: 2rpx solid #ddd;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}
	
			.obtn2 {
				width: 160rpx;
				height: 60rpx;
	
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
				padding: 0;
			}
		}
	
		.order-head {
			padding: 0 25rpx 25rpx;
			// height: 50rpx;
			//border-bottom: 1rpx solid #dfdfdf;
		}
		.order-item{
			padding: 0 25rpx 25rpx;
			// height: 50rpx;
		}
	
		.order-content {
			padding: 20rpx 20rpx 0;
		}
	
		.list-border {
			border-bottom: 1rpx solid #dfdfdf;
		}
	
		.goods-bottom {
			background: #fff;
			padding-bottom: 30rpx;
		}
	}
	.list-info-box{
		position: relative;
	}
	.list-info-box{
		position: relative;
	}
	.box-check{
		width: 60rpx;
		height: 48rp;
		position: absolute;
		top:30rpx;
		left: 20rpx;
		margin-right: 40rpx;
	}
	.search-box {
	    margin-top: 80rpx;
	    transition: .3s;
	    z-index: 9999;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx;
	}
	.search-box-title {
	    font-size: 30rpx;
		color: #666666;
		padding: 20rpx 0rpx;
	}
	.search-box-list {
		padding: 10rpx 0rpx;
	}
	.btn-show{
		margin-left: 200rpx;
		 display: inline-block;
	}
	.all-msg {
		padding-left: 24rpx;
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.car-check{
		width: 100rpx;
		margin: 8rpx;
	}
	.dialog-scroll-box{
		height: 14vh;
	}
</style>
